<tr class="flex flex-wrap w-full md:table-row md:h-[72px] border border-accent md:border-none mb-4 p-4 md:p-0 hover:bg-accent-100" id="<%= dom_id(gift_card) %>">
  <td class="mb-4 w-full md:w-auto md:px-4 md:border-y border-accent md:border-l font-medium">
    <%= gift_card.code.upcase %>
  </td>

  <td class="mb-4 w-full md:w-auto md:px-4 md:border-y border-accent">
    <span class="<%= gift_card.active? ? 'badge-active' : 'badge-inactive'%>">
      <%= gift_card.display_state.titleize %>
    </span>
  </td>

  <td class="w-full md:w-auto md:px-4 md:border-y border-accent">
    <span class="md:hidden font-medium mr-1"><%= Spree.t(:amount) %>:</span>
    <%= gift_card.display_amount %>
  </td>

  <td class="w-full md:w-auto md:px-4 md:border-y border-accent">
    <span class="md:hidden font-medium mr-1"><%= Spree.t(:used) %>:</span>
    <%= gift_card.display_amount_used %>
  </td>

  <td class="w-full md:w-auto md:px-4 md:border-y md:border-r border-accent">
    <span class="md:hidden font-medium mr-1"><%= Spree.t(:expires_at) %>:</span>
    <%= gift_card.expires_at.present? ? local_date(gift_card.expires_at) : '-' %>
  </td>
</tr>
